import React from 'react';
import { View, Text } from 'react-native';
import { TabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import HomeScreen from './Tab/HomeScreen';
import MyCenterScreen from './Tab/MyCenterScreen';


const OrderScreen = () => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>OrderScreen Screen</Text>
    </View>
);


const RootTabs = TabNavigator({
    // 我的个人中心
    MyCenter: {
        screen: MyCenterScreen,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({ tintColor, focused }) => (
                <Ionicons
                    name={'ios-people'}
                    size={26}
                    style={{ color: tintColor }}
                />
            ),
        },
    },
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: '首页',
            tabBarIcon: ({ tintColor, focused }) => (
                <Ionicons
                    name={'ios-home'}
                    size={26}
                    style={{ color: tintColor }}
                />
            ),
        },
    },
    Order: {
        screen: OrderScreen,
        navigationOptions: {
            tabBarLabel: '订单',
            tabBarIcon: ({ tintColor, focused }) => (
                <Ionicons
                    name={'logo-bitcoin'}
                    size={26}
                    style={{ color: tintColor }}
                />
            ),
        },
    },

},{
    tabBarPosition:'bottom',
    tabBarOptions:{
        showIcon:true,
        style:{
            backgroundColor:'#FFFFFF',
            borderWidth:1,
            borderColor:'#B4B4B4',
            height:60,
        },
        activeTintColor:'#00DBF5',//被选中状态下的颜色
        inactiveTintColor:'#B2CBE0',//未被选中的颜色
        labelStyle:{
            marginTop:-2,
        }
    }
});

export default RootTabs;